//查询订单
<template>
    <div class="order">
        <div style="height: 80px">
            <div>
                <el-autocomplete style="margin-top: 20px;margin-left: -1040px"
                                 class="inline-input"
                                 v-model="select" hide-loading=true
                                 placeholder="请输入完整订单号">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-autocomplete>
                <el-button  @click="getSelect()" icon="el-icon-search" circle></el-button>
            </div>
        </div>
        <el-table :data="pagination.records" border :header-cell-style="{background : 'rgba(72,121,129,0.38)'}">
            <el-table-column align="center" fixed="left" prop="productorderCode" label="订单号" width="250"></el-table-column>
            <el-table-column align="center" prop="productorderPost" label="邮政编码" width="150"></el-table-column>
            <el-table-column align="center" prop="productorderReceiver" label="收货人" width="200"></el-table-column>
            <el-table-column align="center" prop="productorderMobile" label="联系方式" width="250"></el-table-column>
            <el-table-column align="center" prop="productorderStatus" label="订单状态" width="150"></el-table-column>
            <!--要进行的操作-->
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="info" icon="el-icon-view" size="small"
                               round></el-button><!--详情修改-->
                    <el-button @click="deleteRecord(scope.row.productorderId)" type="danger" icon="el-icon-delete"
                               size="small" round></el-button><!--删除-->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.current"
                :page-sizes="[7, 10, 15, 20]"
                :page-size="pagination.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total" class="page">
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: 'order',
        data() {
            return {
                select: '',
                pagination: { //分页后的产品信息
                    current: 1, //当前页
                    total: null, //记录条数
                    size: 7,//每页条数
                    records: [     //当前页面的数据
                        {                          //嵌套嵌套再嵌套，还没写完
                            productOrderAddress : {},
                            productOrderUser: {},
                            productOrderItemList: [
                                {
                                    productOrderItemProduct:{},
                                    productOrderItemUser: {}
                                }
                            ]
                        }
                    ]
                },
            }
        },
        created() {
            this.getOrderInfo()
        },
        methods: {
            edit(row){   //跳转订单详情页面,将行数据传过去，就不用再查一遍数据库了
                this.$router.push({name:'OrderDetail',params:{rowData:row}})
            },
            getSelect(){
                this.$axios.get(`/api/productOrder/findByCode/${this.select}/${this.pagination.current}/${this.pagination.size}`).then(res =>{
                    if (res.data != null && res.data != ''){
                        this.pagination = res.data
                    }else {
                        this.$confirm('未查找到相关数据','查询提示',{
                            confirmButtonText: '好吧',
                            type : "warning"
                        }).then(() => {
                        })
                    }
                })
            },
            deleteRecord(productorderId) {   //根据订单号删除订单
                this.$confirm("确定删除该记录吗?,该操作涉及到用户隐私！！！", "删除提示", {
                    confirmButtonText: '我不怕',
                    cancelButtonText: '点错了点错了',
                    type: 'danger'
                }).then(() => { //确认删除
                    this.$axios({
                        url: `/api/productOrder/${productorderId}`,
                        method: 'delete',
                    }).then(res => {
                        if (res.data ==1) {          //只有data返回1时成功 //删除成功
                            this.getOrderInfo()
                            this.$message({   //弹出成功框
                                showClose: true,
                                type: "success",
                                message: "删除成功",
                                center: true //内容居中
                            });
                        }else {
                            this.$message({   //弹出错误框
                                showClose: true,
                                type: "error",
                                message: "删除失败！",
                                center: true //内容居中
                            });
                        }
                    }).catch(res =>{                           //删除失败
                        console.log("删除报错",res)
                        this.$message({   //弹出错误框
                            showClose: true,
                            type: "error",
                            message: "服务器故障，删除失败！",
                            center: true
                        });
                    })
                })
            },
            getOrderInfo() { //分页查询所有产品信息
                this.$axios(`/api/productOrder/${this.pagination.current}/${this.pagination.size}`).then(res => {
                    for (let i = 0; i < res.data.records.length; i++) {  //将代表销售状态的数字转化为对应的销售状态文字
                        switch (res.data.records[i].productorderStatus) {
                            case 0 :
                                res.data.records[i].productorderStatus='!!代付款!!';
                                break;
                            case 1 :
                                res.data.records[i].productorderStatus='--代发货--';
                                break;
                            case 2 :
                                res.data.records[i].productorderStatus='~~待收货~~';
                                break;
                            case 3 :
                                res.data.records[i].productorderStatus='交易成功 √ √';
                                break;
                            case 4 :
                                res.data.records[i].productorderStatus='交易关闭';
                                break;

                        }
                    }
                    this.pagination = res.data
                    console.log("返回的页面数据", this.pagination.records)
                }).catch(error => {
                })
            },
            //改变当前记录条数
            handleSizeChange(val) {
                this.pagination.size = val
                this.getOrderInfo()
            },
            //改变当前页码，重新发送请求
            handleCurrentChange(val) {
                this.pagination.current = val
                this.getOrderInfo()
            },
        },
    };
</script>
<style lang="scss" scoped>
    .order {              /*整体表格样式*/
        padding: 0px 40px;
    }

    .page {                 /*页码样式*/
        margin-top: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
